<template>
    <view>
        <!-- orderSub/pages/bill/bill.wxml -->
        <view class="nillCon">
            <view class="head-nav">
                <view v-for="(item, index) in tabMenu" :key="index" :class="navIndex == index ? 'activite' : ''" :data-index="index" @tap="checkIndex">
                    {{ item }}

                    <image v-if="navIndex == index" class="subscript" src="https://oos-cn.ctyunapi.cn/front-end/static/static/title_bg2.png"/>

                    <!-- <view wx:if="{{navIndex==index}}" class="subscript"></view> -->
                </view>
            </view>

            <view class="timeCon">
                <picker v-if="navIndex == '0'" fields="month" header-text="选择时间" mode="date" :value="time" @change="bindDateChange">
                    <view class="time">{{ time }}</view>
                </picker>
                <picker v-else fields="year" header-text="选择时间" mode="date" :value="time" @change="bindYearChange">
                    <view class="time">{{ yearTime }}</view>
                </picker>

                <!--<view class="timeDes">-->
                    <!--统计数据不含车队账户-->
                    <!--<image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/tip.png"></image>-->
                <!--</view>-->
            </view>

            <view v-if="navIndex == '0'">
                <!-- #V2G功能 -->
                <view v-if="isV2GOption" style="margin: 24rpx;">
                    <u-subsection 
                    :active-color="objColor2.btnColor" 
                    :button-color="objColor2.btnColor"
                    :current="subIndex"
                    font-size="30rpx"
                    :list="list"
                    mode="button"
                    @change="onChangeSub"
                    />
                </view>
                <view v-if="HalfTopVal">
                    <view v-if="subIndex === 0" class="summaryCon">
                        <view>
                            <image :src="(mixPowerIconList[0]&&mixPowerIconList[0].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/amount.png'"/>
                            <view class="summaryTitle">充电量</view>
                            <view class="summaryVal">
                                {{ total.sumPower ? total.sumPower : 0 }}
                                <text>度</text>
                            </view>
                        </view>
                        <view>
                            <image :src="(mixPowerIconList[1]&&mixPowerIconList[1].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/total.png'"/>
                            <view class="summaryTitle">共支出</view>
                            <view class="summaryVal">
                                {{ total.sumOrderNum ? total.sumOrderNum : 0 }}
                                <text>笔</text>
                            </view>
                        </view>
                        <view>
                            <image :src="(mixPowerIconList[2]&&mixPowerIconList[2].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/total.png'"/>
                            <view class="summaryTitle">合计</view>
                            <view class="summaryVal">
                                {{ total.sumActualBalance ? total.sumActualBalance : 0 }}
                                <text>元</text>
                            </view>
                        </view>
                        <view>
                            <image :src="(mixPowerIconList[3]&&mixPowerIconList[3].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/discount.png'"/>
                            <view class="summaryTitle">优惠</view>
                            <view class="summaryVal">
                                <!-- -{{ total.sumTotalCoupon ? total.sumTotalCoupon : 0 }} -->
                                -{{ total.preferentialMonthStr }}
                                <text>元</text>
                            </view>
                        </view>
                    </view>
                    <!-- #V2G功能 -->
                    <view v-if="isV2GOption && subIndex === 1"  class="summaryCon">
                        <view>
                            <image :src="(mixPowerIconList[0]&&mixPowerIconList[0].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/amount.png'"/>
                            <view class="summaryTitle">放电量</view>
                            <view class="summaryVal">
                                {{ total.disChargeSumPower ? total.disChargeSumPower : 0 }}
                                <text>度</text>
                            </view>
                        </view>
                        <view>
                            <!-- #V2G功能 -->
                            <image v-if="isV2GOption" :src="(mixPowerIconList[1]&&mixPowerIconList[1].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/total.png'"/>
                            <image v-else src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/dischargeIco.png"/>
                            <view class="summaryTitle">共收益</view>
                            <view class="summaryVal">
                                {{ total.disChargeSumNum ? total.disChargeSumNum : 0 }}
                                <text>笔</text>
                            </view>
                        </view>
                        <view>
                            <image :src="(mixPowerIconList[2]&&mixPowerIconList[2].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/total.png'"/>
                            <view class="summaryTitle">合计</view>
                            <view class="summaryVal">
                                {{ total.disChargeBalance ? total.disChargeBalance : 0 }}
                                <text>元</text>
                            </view>
                        </view>
                        <!-- <view>
                            <image :src="(mixPowerIconList[3]&&mixPowerIconList[3].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/discount.png'"></image>
                            <view class="summaryTitle">奖励金</view>
                            <view class="summaryVal">
                                -{{ total.preferentialMonthStr }}
                                <text>元</text>
                            </view>
                        </view> -->
                    </view>
                </view>
                <view v-else class="emptyCon columnCon">
                    <view>暂无数据</view>
                    <view class="emptyButton" @tap="goHome">去充电</view>
                </view>
                <view class="columnCon">
                    <view class="columnTitle">{{subIndex === 1 ? '近半年放电收益对比（元）' : '近半年充电消费对比（元）'}}</view>
                    <!-- <canvas canvas-id="columnCanvas" disable-scroll="true" class="columnCanvas" bindtouchstart="touchcHandler"
                    bindtouchmove="movecHandler" bindtouchend="touchEndcHandler"></canvas> -->
                    <!-- <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> -->
                    <!-- <canvas id="mychart-bar" v-if="HalfVal"></canvas> -->
                    <view v-if="HalfVal" class="columnCanvas">
                        <l-echart ref="chart"/>
                    </view>

                    <view v-else class="emptyCon">
                        <view>暂无数据</view>
                        <view class="emptyButton" @tap="goHome">去充电</view>
                    </view>
                </view>

                <view v-if="subIndex ===0" class="rankingCon">
                    <view class="rankingTitle">常去的充电站top3</view>
                    <view v-if="siteTop.length">
                        <view v-for="(item, index) in siteTop" :key="index">
                            <view class="rankingRow">
                                <image :src="'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/win_' + index + '.png'"/>
                                <view class="rankingVal">
                                    <view>{{ item.stationName }}</view>
                                    <text>{{ item.orderNum }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else class="emptyCon">
                        <view>暂无数据</view>
                        <view class="emptyButton" @tap="goHome">去充电</view>
                    </view>
                </view>
                <!-- #V2G功能 -->
                <view v-if="isV2GOption && subIndex ===1" class="rankingCon">
                    <view class="rankingTitle">常去的放电站top3</view>
                    <view v-if="siteTop.length">
                        <view v-for="(item, index) in siteTop" :key="index">
                            <view class="rankingRow">
                                <image :src="'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/win_' + index + '.png'"/>
                                <view class="rankingVal">
                                    <view>{{ item.stationName }}</view>
                                    <text>{{ item.orderNum }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else class="emptyCon">
                        <view>暂无数据</view>
                        <view class="emptyButton" @tap="goHome">去放电</view>
                    </view>
                </view>
            </view>
            <view v-else-if="navIndex == '1'">
                <view class="yearDataCon">
                    <view class="yearRow">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/amount.png"/>
                        <view class="yearRowVal">
                            <view>充电量</view>
                            <view class="num">
                                {{ yearData.sumPower }}
                                <text>度</text>
                            </view>
                        </view>
                    </view>
                    <view class="division"/>
                    <view class="yearRow">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/expenditure.png"/>
                        <view class="yearRowVal">
                            <view>共支出</view>
                            <view class="num">
                                {{ yearData.sumOrderNum }}
                                <text>笔</text>
                            </view>
                        </view>
                    </view>
                    <view class="division"/>
                    <view class="yearRow">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/total.png"/>
                        <view class="yearRowVal">
                            <view>合计</view>
                            <view class="num">
                                {{ yearData.sumActualBalance }}
                                <text>元</text>
                            </view>
                        </view>
                    </view>
                    <view class="division"/>
                    <view class="yearRow">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/discount.png"/>
                        <view class="yearRowVal">
                            <view>优惠</view>
                            <view class="num">
                                <!-- {{ yearData.sumTotalCoupon?'-'+yearData.sumTotalCoupon:0 }} -->
                                -{{ yearData.preferentialYearStr }}
                                <text>元</text>
                            </view>
                        </view>
                    </view>
                    <!-- #V2G功能 -->
                    <template v-if="isV2GOption">
                        <view class="yearRow">
                            <image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/amount.png"/>
                            <view class="yearRowVal">
                                <view>放电量</view>
                                <view class="num">
                                    {{ yearData.disChargeSumPower }}
                                    <text>度</text>
                                </view>
                            </view>
                        </view>
                        <view class="yearRow">
                            <image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/dischargeIco.png"/>
                            <view class="yearRowVal">
                                <view>放电收益</view>
                                <view class="num">
                                    {{ yearData.disChargeBalance }}
                                    <text>元</text>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>

                <view class="constituteCon">
                    <view class="constituteTitle">支出构成</view>
                    <view class="CanvasCon">
                        <!-- <canvas canvas-id="constituteCanvas" class="constituteCanvas"></canvas> -->
                         <!--<ec-canvas id="constituteCanvas" canvas-id="constituteCanvas" :ec="constituteEc"></ec-canvas>-->
                        <div>
                            <l-echart ref="constituteCanvas"/>
                        </div>
                        <view class="term">
                            <view v-for="(item, index) in yearDataList" :key="index" class="terms">
                                <text class="ritemico1" :style="'background-color: ' + item.color + ';'"/>
                                {{ item.name }}：{{ item.value ? item.value : 0 }}元
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	var https_1 = require('./../../../api/https.js');
	var wh = uni.getSystemInfoSync();
	import lEchart from '../../components/lime-echart/components/l-echart/l-echart'
	import * as echarts from 'echartsPages/static/js/echarts.js'
	export default {
		components:{
			lEchart
		},
		data() {
			return {
                list: [{name: '充电账单'},{name: '放电账单'}], // #V2G功能
                subIndex: 0, // #V2G功能 0:充电账单 1:放电账单
				navIndex: '0',
				tabMenu: ['月账单', '年账单'],
				dataList: [],
				calendar: [],
				siteTop: [],
				yearData: [],
				yearDataList: [],
				yearTime: new Date().getFullYear(),
				time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
				ec: {
					lazyLoad: true
				},
				constituteEc: {
					lazyLoad: true
				},
				HalfVal: false,
				HalfTopVal: false,
				total:{},
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			let that = this;
			console.log('1111')
			this.getQeuryStationReportByMonth();
			this.monthData();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {},

		mounted(){
			console.log('3232323')
			//  this.$refs.chart.init(echarts, chart => {
			// 	chart.setOption(this.option);
			// });
		},
		methods: {
            // #V2G功能
            onChangeSub(index) {
                this.subIndex = index
                this.init_echarts()
                this.getQeuryStationReportByMonth()
            },
			//初始化图表
			async init_echarts() {
				let data =await this.getqueryTopMonthBillReportList()
        console.log(data)
				let option ={
					series: [{
						barWidth:15,
						data: data.sumActualBalanceList.reverse(),
						type: "bar",
						color:'#499FF6',
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#707485',
										fontSize: 12,
									},
								},
							},
						},
					}],
					grid:{ // 让图表占满容器
						top:"20px",
						left:"0px",
						right:"0px",
						bottom:"20px"
					},
					xAxis: {
						data: data.monthOrYearStrList.reverse(),
						type: "category",
						axisTick: {
							show: false,  //刻度线
						},
						axisLine:{
							lineStyle:{
								color:'#DCDFE6'
							}
						},
						axisLabel:{
							textStyle:{
								color:'#707485'
							}
						}
					},
					yAxis: {
						type: "value",
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						},
						axisTick: {
							show: false,  //刻度线
						},
						axisLine: {
							show: false, //隐藏y轴
						},
						axisLabel: {
							show: false, //隐藏刻度值
						},

					},
				}

				this.$nextTick(()=>{
                    if(this.HalfVal) {
                        this.$refs.chart.init(echarts, chart => {
                            chart.setOption(option);
                        });
                    }
					
				})


			},

			init_constituteCanvas () {
				let data = this.getQueryBillReportByMember()
				let option = {
					color:['#FF9D9B','#4FD59F'],
					series: [
						{
							type: 'pie',
							radius: [0,'100%'],
							center: ['50%', '50%'],
							type: 'pie',
							data: [
								...data
							],
							label:{
								normal:{
									show:false
								}
							},
							roseType: 'radius',
							labelLine:{
								normal:{
									position:'inner',
									show:false
								}
							}
						}
					]
				}
				// this.$refs.constituteCanvas.init(this.$echarts, constituteCanvas => {
				// 	constituteCanvas.setOption(option);
				// });

                this.$nextTick(() => {   
                    this.$refs.constituteCanvas.init(echarts, constituteCanvas => {
                        console.log(constituteCanvas, 'constituteCanvas..........')   
                        constituteCanvas.setOption(option);
                    });
                })
			},

			getMonths: function () {
				var monthArr = [];
				var data = new Date();
				data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份

				for (var i = 0; i < 6; i++) {
					data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1

					var m = data.getMonth() + 1; //   data.getFullYear() + "-" +

					monthArr.unshift(m + '月');
				}

				return monthArr;
			},

			bindDateChange: function (e) {

				this.time= e.detail.value

				this.init_echarts();
				this.monthData();
				this.getQeuryStationReportByMonth();
				// .replace('-', '年')+'月'
			},

			bindYearChange: function (e) {

				this.yearTime= e.detail.value

				this.init_constituteCanvas();
				// .replace('-', '年')+'月'
			},

			// 获取月份数据
			async getqueryTopMonthBillReportList(){

				var monthOrYearStrList;
				var sumActualBalanceList;
				var number;
				var that = this;
				monthOrYearStrList = [];
				sumActualBalanceList = [];

                let queryUrl = https_1.queryTopMonthBillReportList
                let params = {
                    monthString: this.time,
                    monthNum: 6,
                    isTuanDui:uni.getStorageSync('memberType').toString() == '0'?false:true,
                    disCharge: false // 充电
                }

                // #V2G功能-放电
                if (this.isV2GOption && this.subIndex === 1) {
                    queryUrl = https_1.queryTopMonthDisChargeBillReportList
                    params.disCharge = true
                }

				return await queryUrl(params).then(function (res) {
                    if (res.data) {
                        res.data.map(function (item) {
                            monthOrYearStrList.push(Number(item.monthOrYearStr.split('-')[1]) + '月');

                            // #V2G功能
                            if (that.isV2GOption) {
                                sumActualBalanceList.push(item.sumActualBalance ? (item.sumActualBalance / 100).toFixed(2) : 0);
                            } else {
                                sumActualBalanceList.push(item.sumBusBalance ? (item.sumBusBalance / 100).toFixed(2) : 0);
                            }
                        });
                        that.HalfVal= true
                    } else {
                        that.HalfVal= false
                    }

                    return {
                        monthOrYearStrList,sumActualBalanceList
                    }
                })
			},

			// 年账单
			getQueryBillReportByMember() {
				let that = this
                uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let data = []
				https_1
					.queryBillReportByMember({
						yearString: this.yearTime,
						isTuanDui:uni.getStorageSync('memberType').toString() == '0'?false:true
					})
					.then((res)=> {
						console.log(res,'queryBillReportByMember')
						if (res.data) {
							data.push(
								{
									value: (res.data.sumActualPowerBalance / 100).toFixed(2),
									name: '充电费',
									color: '#FF9D9B'
								},
								{
									value: (res.data.sumActualServiceBalance / 100).toFixed(2),
									name: '服务费',
									color: '#4FD59F'
								}
							);
							var yearData = {
								sumPower: (res.data.sumPower / 1000).toFixed(2),
								sumOrderNum: res.data.sumOrderNum,
								sumActualBalance: (res.data.sumActualBalance / 100).toFixed(2),
								// sumTotalCoupon:res.data.sumTotalCoupon?(res.data.sumTotalCoupon/100).toFixed(2):'0.00',
                                // 12-29 张定友要求前端处理
                                preferentialYearStr: ((res.data.sumBusBalance-res.data.sumActualBalance)/100).toFixed(2),// 年账单优惠
							};

                            // #V2G功能
                            if (that.isV2GOption) {
                                yearData.disChargeSumPower = (res.data.disChargeSumPower / 1000).toFixed(2)
                                yearData.disChargeBalance = (res.data.disChargeBalance / 100).toFixed(2)
                            }

							that.yearData= yearData
              that.yearDataList= data

						} else {
							data.push(
								{
									value: 0,
									name: '充电费',
									color: '#FF9D9B'
								},
								{
									value: 0,
									name: '服务费',
									color: '#4FD59F'
								}
							);
							var yearData = {
								sumPower: 0,
								sumOrderNum: 0,
								sumActualBalance: 0,
								sumTotalDiscount: 0,
								// sumTotalCoupon:0
                                preferentialYearStr: 0,
							};
							that.yearData= yearData,
              that.yearDataList= data

						}
                        uni.hideLoading();
					})
				return data
			},
			// top3
			getQeuryStationReportByMonth: function () {
				var that = this;
                uni.showLoading({
					title: '加载中...',
					mask: true
				});

                const params = {
                    monthString: this.time,
                    isTuanDui:uni.getStorageSync('memberType').toString() == '0'?false:true,
                    disCharge: false
                }

                // #V2G功能
                if (this.isV2GOption && this.subIndex == 1) {
                    params.disCharge = true
                }

				https_1.qeuryStationReportByMonth(params).then(function (res) {
                    var data = res.data.map(function (item) {
                        item.orderNum = item.orderNum + '次';
                        return item;
                    });
                    that.siteTop= data
                    uni.hideLoading();
                });
			},

			//tab栏
			checkIndex: function (e) {
				var index = e.currentTarget.dataset.index;
				this.navIndex= index
				// 重新加载柱状图表

				if (index == '0') {
					this.init_echarts();
					this.monthData();
					this.getQeuryStationReportByMonth();
				} else {
					this.init_constituteCanvas();
				}
			},

			monthData: function () {
				var that = this;
				var number = 0;
                uni.showLoading({
					title: '加载中...',
					mask: true
				});
				https_1
					.queryBillReportByMember({
						monthString: this.time,
						isTuanDui:uni.getStorageSync('memberType').toString() == '0'?false:true
					})
					.then(function (res) {
						that.init_echarts();
						if (res.data) {
							var data = {
								sumPower: (res.data.sumPower / 1000).toFixed(2),
								sumOrderNum: res.data.sumOrderNum,
								sumActualBalance: (res.data.sumActualBalance / 100).toFixed(2),
								// sumTotalCoupon:(res.data.sumTotalCoupon/100).toFixed(2),
                                // 12-29 张定友要求前端处理
                                preferentialMonthStr: ((res.data.sumBusBalance-res.data.sumActualBalance)/100).toFixed(2),// 月账单优惠
							};

                            // #V2G功能
                            if (that.isV2GOption) {
                                data.disChargeSumPower = (res.data.disChargeSumPower / 1000).toFixed(2)
                                data.disChargeSumNum = res.data.disChargeSumNum
                                data.disChargeBalance = (res.data.disChargeBalance / 100).toFixed(2)
                            }

                            that.total= data
                            that.HalfTopVal= true
						} else {
							that.HalfTopVal= false
						}
                        uni.hideLoading();
					});
			},

			// 去到主页
			goHome: function () {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>
<style lang="less">
    /* orderSub/pages/bill/bill.wxss */
    .nillCon{
        background-color: #f5f6fa;
        height: 100vh;
    }
    .head-nav{
        display: grid;
        grid-template-columns: 62% 15%;
        text-align: center;
        font-size: 28rpx;
        color: #9699A6;
        height: 90rpx;
        line-height: 90rpx;
        background: #fff;

        .subscript {
            position: absolute;
            width: 36rpx;
            height: 5rpx;
            background: linear-gradient(90deg, rgba(249, 250, 251, 0), var(--textColor));
            border-radius: 3rpx;
            margin-top: 85rpx;
            margin-left: -70rpx;
            display: inline-block;
        }


        .activite {
            font-size: 34rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: var(--textColor);
        }
    }

    .timeCon{
        padding: 40rpx 32rpx 48rpx 58rpx;
        display: flex;
        justify-content: space-between;
        .time{
            font-weight: bold;
            color: #18181A;
            font-size: 34rpx;
            font-family: PingFang SC;
            display: inline-block;
            position: relative;
        }
        .time:after {
            width: 0;height:0;border-left:13rpx solid transparent;border-right: 13rpx solid transparent;border-bottom: 13rpx solid #909399;
            content: "";
            position: absolute;
            top: 20rpx;
            margin-left: 10rpx;
        }
        .timeDes{
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #C0C4CC;
        }
        image{
            width: 25rpx;
            height: 25rpx;
            vertical-align: initial;
            margin-left: 8rpx;
        }
    }
    .summaryCon{
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        text-align: center;
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        border-radius: 16rpx;
        padding: 36rpx 0rpx 40rpx 0rpx;
        margin: 0rpx 24rpx 16rpx 24rpx;

        image{
            width: 80rpx;
            height: 64rpx;
        }
        .summaryTitle{
            font-weight: 500;
            color: #606266;
            font-size: 26rpx;
            margin-top: 5rpx;
        }
        .summaryVal{
            margin-top: 10rpx;
            font-size: 30rpx;
            font-family: DIN;
            font-weight: bold;
            color: #FC724C;
            text{
                font-size: 28rpx;
                font-family: PingFang-SC-Medium;
                font-weight: 500;
            }
        }
    }

    .columnCon{
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        border-radius: 16rpx;
        padding: 45rpx 35rpx 35rpx 35rpx;
        margin: 0rpx 24rpx 16rpx 24rpx;
        .columnTitle{
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #18181A;

        }
        .columnCanvas{
            height: 180px;
        }
    }

    .rankingCon{
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        border-radius: 16rpx;
        padding: 45rpx 35rpx 35rpx 45rpx;
        margin: 0rpx 24rpx 16rpx 24rpx;
        .rankingTitle{
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #18181A;
            margin-bottom: 29rpx;
        }

        .rankingRow{
            border-bottom: 1px solid #DCDFE6;
            padding-bottom: 12rpx;
            display: grid;
            grid-template-columns: 60rpx auto;
            height: 60rpx;
            line-height: 60rpx;
            margin-bottom: 15rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #303133;
            image{
                width: 30rpx;
                height: 51rpx;
            }

            .rankingVal{
                display: flex;
                justify-content: space-between;

                text{
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #606266;
                }
            }
        }


    }

    .yearDataCon{
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        border-radius: 16rpx;
        padding: 0 35rpx 0 35rpx;
        margin: 0rpx 24rpx 16rpx 24rpx;
        .yearRow{
            display: grid;
            grid-template-columns: 120rpx auto;
            height: 64rpx;
            line-height: 64rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #303133;
            padding: 46rpx 0 45rpx 0;
            image{
                width: 80rpx;
                height: 64rpx;
            }
            .yearRowVal{
                display: flex;
                justify-content: space-between;
                .num{
                    font-size: 34rpx;
                    font-weight: bold;
                    color: #FC724C;
                    text{
                        font-size: 32rpx;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .division{
        // margin: 0 18rpx;
        border-top: 1px dashed #C0C4CC;
    }

    .constituteCon{
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        border-radius: 16rpx;
        padding: 45rpx 0 35rpx 0;
        margin: 0rpx 24rpx 16rpx 24rpx;
        .constituteTitle{
            padding: 0 35rpx;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #18181A;
        }

        .CanvasCon{
            display: grid;
            grid-template-columns: 55% auto;
            padding-top: 40rpx;
            height: 300rpx;
            .constituteCanvas{
                width: 50vw;
                height: 35vh;
            }
            .term{
                display: flex;
                flex-direction: column;
                .terms{
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #575C71;
                    margin-top: 39rpx;
                    .ritemico1{
                        padding: 7rpx;
                        width: 0;
                        height: 0;
                        font-size: 0;
                        border-radius: 12rpx;
                        margin-right: 20rpx;
                        vertical-align: middle;
                        background: #FF9D9B;
                    }
                }
            }
        }
    }

    .emptyCon{
        padding: 80rpx 0rpx;
        text-align: center;
        font-size: 24rpx;
        color: #8c909a
    }
    .emptyButton{
        margin-top: 20rpx;
        color: var(--textColor);
    }
</style>
